<!-- COPYRIGHT (C) 2009 IVC Corporation -->
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Viewer Map - IVC</title>
	 <style type="text/css">
    
    body {
      background-color: white;
      color: black;
      font-family: Arial, sans-serif;
      font-size: 13px;
    }

    td {
      vertical-align : top;
    }

    td.search-form {
      width : 300px;
    }

    #results .header {
      font-size : 16px;
      font-weight : bold;
      margin-bottom : .25em;
      margin-top : 1em;
    }

    #results .gs-result {
      margin-bottom : .5em;
    }

    #results div.gs-watermark {
      display : none;
    }

    #results div.gs-directions {
      display : none;
    }

    #results div.gs-directions-to-from {
      display : block;
    }

    div.static-map {
      float : left;
      margin-right : 1em;
    }

    a.static-map img {
      border : 1px solid #7777cc;
    }

    .breaker {
      clear : both;
      margin-bottom : 1em;
    }

    .results-td {
      width : 400px
    }
    .maps-td {
      width : 400px
    }

    #resultsImg {
      border : 1px solid #f7f7f7;
      margin-bottom : 2em;
    }


    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false
    &amp;key=ABQIAAAA0RCB51qgBatSzHuRunxgExROeQ-2W8NcETCor_xnrdtUjbWVPBSv0FmogZzLwrtlGNtX-3TTxn1NNA"
    type="text/javascript">
	</script>

	<script src="http://www.google.com/jsapi"
        type="text/javascript"></script>
    <script type="text/javascript">
	google.load('search', '1');
	var map ;
	function initialize() {
		if (GBrowserIsCompatible()) {
      		hideGoogleSearch();
			hideResultPanel();
			map = new GMap2(document.getElementById("map_canvas"));
			map.setMapType(G_NORMAL_MAP);
			map.setCenter(new GLatLng(35.625973, 139.782242), 15);//new GLatLng(37.0625,-95.677068), 13);
			CreateLocalSearch();
		}
    }
    
	function MoveTo(lat,lng,content) {
		map.clearOverlays();
		var point = new GLatLng(lat,lng);
		map.panTo(point);
		localSearch.setCenterPoint(point);
		map.addOverlay(new GMarker(point));
		map.openInfoWindow(point,
        document.createTextNode(content));
	}
	
	var localSearch;
	
	/**
	* create local search.
	*/
	function CreateLocalSearch() {
		//var sc = new RawSearchControl();
		this.searcherform = document.getElementById("searcher");
	  
		this.results = document.getElementById("results");
		this.searchform = document.getElementById("searchform");
		
		localSearch = new google.search.LocalSearch();
		var point = new GLatLng(35.625973, 139.782242);
		localSearch.setCenterPoint(point);
		localSearch.setSearchCompleteCallback(this,
                                         searchComplete,
                                         null
                                         );
	
	      // now, create a search form and wire up a submit and clear handler
		this.searchForm = new google.search.SearchForm(true, this.searchform);
		this.searchForm.setOnSubmitCallback(this,
                                          onSubmit);
	
		this.searchForm.setOnClearCallback(this,
                                          onClear);
    }
    /**
     * onSubmit - called when the search form is "submitted" meaning that
     * someone pressed the search button or hit enter. The form is passed
     * as an argument
     */
   function onSubmit () {
		if (this.searchForm.input.value) {
			localSearch.execute(this.searchForm.input.value);
		}
		// always indicate that we handled the submit event
		return false;
    }
    /**
     * onClear - called when someone clicks on the clear button (the little x)
     */
    function onClear() {
		clearResults();
		// document.getElementById("resultsImg").src = this.worldPointsUrl;
		this.searchForm.input.value = "";
    }

    function execute(q) {
		this.searchForm.input.value = q;
		this.searcher.execute(q);
    }

    /**
     * searchComplete - called when a search completed.
     */
	function searchComplete () {
		// always clear old from the page
		clearResults();
		//show research result dlg.
		if (localSearch.results && localSearch.results.length != 1) {
			showResultPanel();
		} else {
			if (localSearch.cursor) {
				showResultPanel();
			} else {
				hideResultPanel();				
			}
		}
		// if the searcher has results then process them
		if (localSearch.results && localSearch.results.length > 0) {
		
			// now manually generate the html that we disabled
			// initially and display it
			var resultcontent = '';
			var content;
			for (var i=0; i<localSearch.results.length; i++) {
				var result = localSearch.results[i];
				div = result.html.cloneNode(false);
				
				// create a static map image for this result
				var img = document.createElement("img");
				GlocalSearch.resizeStaticMapUrl(result, 30, 30);
				img.src = result.staticMapUrl;
				img.title = result.titleNoFormatting;
				img.id = "img" + i;
				
				// now hyperlink the image
				// and then insert it into a float-left div
				var a = document.createElement("a");
				a.className = "static-map";
				content = getDecriptionContent(result);

				a.appendChild(img);
				a.href = "javascript:MoveTo('" + result.lat + "','" + result.lng + "','"+ content  +"')";

				div.innerHTML =  "<span style='color:blue'>" + result.titleNoFormatting + "</span>";				
				//create table
				var tb = document.createElement("table");
				var trr = document.createElement("tr");
				var td1 = document.createElement("td");
				var td2 = document.createElement("td");
				td1.appendChild(a);
				td2.appendChild(div);
				trr.appendChild(td1);
				trr.appendChild(td2);
				tb.appendChild(trr);
				this.results.appendChild(tb);		  
				
				var breaker = createDiv(null,"breaker");
				this.results.appendChild(breaker);
			}
			//check have result.
	       	var first1 = localSearch.results[0];
         	MoveTo(first1.lat,first1.lng,getDecriptionContent(first1));
			//if (localSearch.results.length >= 4)
				addPaginationLinks(localSearch);
		} else {
			//have no result.
       		var rdiv = createDiv(null,"result-map");
       		rdiv.innerHTML =  "<span style='color:blue'>" + "Your location was not found." + "</span>";
       		this.results.appendChild(rdiv);
		}
    }
	function getDecriptionContent(result) {
		var content = result.titleNoFormatting;
		if(result.phoneNumbers) {
			//content = result.titleNoFormatting + ", " + result.streetAddress + ", " + result.city + ", "  			+ result.region + ", " + result.country + ", " + result.phoneNumbers[0].number;				
			content = result.titleNoFormatting + ", " + result.region + ", " + result.country + ", " + result.phoneNumbers[0].number;				
		} else {
			content = result.titleNoFormatting + ", " + result.region + ", " + result.country ;
		}
		return content;
	}
	/**
	* Research results Paging.
	*/
   	function addPaginationLinks() {
		// The cursor object has all things to do with pagination
		var cursor = localSearch.cursor;
		if(!cursor) {
			return;
		}
		var curPage = cursor.currentPageIndex; // check what page the app is on
		var pagesDiv = document.createElement('div');
		
		for (var i = 0; i < cursor.pages.length; i++) {
			//alert(cursor.pages.length);
			var page = cursor.pages[i];
			if (curPage == i) { // if we are on the curPage, then don't make a link
				var label = document.createTextNode(' ' + page.label + ' ');
				pagesDiv.appendChild(label);
			} else {
				// If we aren't on the current page, then we want a link to this page.
				// So we create a link that calls the gotoPage() method on the searcher.
				var link = document.createElement('a');
				link.href = 'javascript:localSearch.gotoPage('+i+');';
				link.innerHTML = page.label;
				link.style.marginRight = '10px';
				link.style.marginLeft = '10px';
				pagesDiv.appendChild(link);
			}
		}
		var contentDiv = document.getElementById('resultPages');
		contentDiv.appendChild(pagesDiv);
	}
    /**
     * clearResults - clear out any old search results
     */
	function clearResults() {
		var resultsDiv = document.getElementById('results');
		var resultsDiv2 = document.getElementById('resultPages');
		removeChildren(resultsDiv);
		removeChildren(resultsDiv2);
    }
    /**
     * Static DOM Helper Functions
     */
    function removeChildren(parent) {
		while (parent.firstChild) {
			parent.removeChild(parent.firstChild);
		}
    }
	
    function createDiv(opt_text, opt_className) {
		var el = document.createElement("div");
		if (opt_text) {
			el.innerHTML = opt_text;
		}
		if (opt_className) { el.className = opt_className; }
		return el;
    }
  
    function moveDown() {
		map.panDirection(0, -1);
	}
	
 	function moveUp() {
		map.panDirection(0, +1);
	}
	
	function moveLeft() {
		map.panDirection(+1, 0);
	}
	
	function moveRight() {
		map.panDirection(-1, 0);
	}
	
	function zoomIn() {
		map.zoomIn();
	}
	
	function zoomOut() {
		map.zoomOut();
	}
	
	function changeSATELLITE() {
    	map.setMapType(G_SATELLITE_MAP);
    }
    
    function changeHYBRID() {
    	map.setMapType(G_HYBRID_MAP);
    }
    
    function changePHYSICAL() {
    	map.setMapType(G_PHYSICAL_MAP);
    }
    
    function changeNormal() {
    	map.setMapType(G_NORMAL_MAP);
    }
    
	function showGoogleSearch() {
		document.getElementById('searchform').style.display = '';
		this.searchForm.input.focus();
	}
	
	function showResultPanel() {
		document.getElementById('resultdlg').style.display = '';
	}
	
	function hideResultPanel() {
		document.getElementById('resultdlg').style.display = 'none';
	}
	function hideGoogleSearch() {
		document.getElementById('searchform').style.display = 'none';
	}
  </script>
  </head>
 <body onload="initialize()" onunload="GUnload()" >
  <table border="0" style="width: 100%; height: 100%">
  <form id="searcher">
 	<tr id="searchdlg" >
		<div id="searchform"></div>
	</tr>
	</form>
	<tr>
		<td id="resultdlg" style="width: 30%; height: 100%">
	      <table border="0" style="width: 100%">
	      	<td>
	          <div id="resultPages">
			  </div>
			  <div class="breaker">
			  </div>
			</td>
			</tr>
			<tr >
			<td class="results-td">
				<div id="results">
			  </div>
			</td>
			</tr>
			<tr>
	      </table>
		</td>
	
		<td class="maps-td" style="width: 70%; height: 100%">
			<div id="map_canvas" style="width: 100%; height: 100%"></div>
		</td>
	</tr>
	
</table> 

</body>
</html>